import React, { useEffect, useState } from 'react'
import api from '@/api'
import { fromNowFun } from '@/utils'
import { tagList } from '@/utils/data'
import Comments from './components/Comments'
export default function Detail(props: any) {
    // 根据id请求详情页数据
    const id = props.match.params.id;
    const [detailData, setDetailData] = useState<any>({})
    useEffect(() => {
        api.getBlogDetail(id).then(res => {
            if (res.success) {
                setDetailData(res.data)
            }
        })
    }, []);
    const getTabNameById = (id) => {
        let title = ''
        tagList.forEach(item => {
            if (item.id === id) {
                title = item.name
            } else if (item.children) {
                item.children.forEach(item2 => {
                    if (item2.id === id) {
                        title = item2.name;
                    }
                })
            }
        })
        return title;
    }
    return (
        <div>
            <div className="top_item">
                <span className="author">{detailData.author}</span>
                <span className="date">{fromNowFun(detailData.create_time)}</span>
                <span className="tag">{getTabNameById(detailData.type)}</span>
            </div>
            <div className="center_item">{detailData.title}</div>
            <div className="bottom_item">{detailData.content}</div>
            <div className="action_item">
                <span>浏览量：{detailData.looks}</span>
                <span>评论数：{detailData.comments}</span>
            </div>
            <Comments id={id}></Comments>
        </div>
    )
}
